<script setup lang='ts'>
import { reactive, ref, onMounted } from 'vue';
import { getUserContainer } from '@/api/user';
import { uploadFile } from '@/api/message';
import { message } from '@/utils/message';
import { createWorkSheet } from '@/api/worksheet';
import router from '@/router';
const form = reactive({
  title: '',
  sheet_type: '',
  content: '',
  container_id:''
});
const containerlist=ref([])
onMounted(async () => {
  let res=await getUserContainer({
    page: 1,
    count: 100,
  });
  console.log('容器列表', res);
  containerlist.value=res.data.data
});
//上传附件
const aid = ref(null)
const selectedFileName = ref(null);
const onFileSelected = (event) => {
  const file = event.target.files[0];
  if (file) {
    selectedFileName.value = file.name; // 显示文件名
    loading.value = true;
    uploadFile({ file: file }).then((res) => {
      if (res.data.code == 200) {
        message('上传成功', { type: 'success' });
        loading.value = false;
        aid.value = res.data.data.attachment_id
      } else {
        message('上传失败,只能为图片！', { type: 'error' });
      }
    })
  } else {
    selectedFileName.value = null; // 如果用户取消选择，清空文件名
  }
}
const onSubmit = () => {
  if (aid.value != null) {
    form.content += `@@@${aid.value}`
  };
  createWorkSheet(form).then(res => {
    console.log('创建结果', res);
    if (res.status == 200) {
      message('提交成功', { type: 'success' });
      router.push('/workSheet/workSheet')
    }
  })
}
const loading = ref(false)

</script>

<template>
  <div class="main">
    <el-form :model="form" label-width="auto" style="max-width: 600px;padding: 20px">
      <el-form-item label="工单类型">
        <el-select v-model="form.sheet_type" placeholder="请选择类型">
          <el-option label="售前" value="售前" />
          <el-option label="售后" value="售后" />
        </el-select>
      </el-form-item>
      <el-form-item label="标题">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="容器ID">
        <el-select v-model="form.container_id" placeholder="请选择容器">
          <el-option label="无" value="" />
          <el-option v-for="item in containerlist" :label="item.container_id" :key="item.container_id"
            :value="item.container_id" />
        </el-select>
      </el-form-item>
      <el-form-item label="内容">
        <el-input v-model="form.content" type="textarea" />
      </el-form-item>
      <el-form-item label="附件" v-loading="loading">
        <el-button class="btn" @click="$refs.fileInput.click()">上传附件</el-button>
        <input type="file" ref="fileInput" @change="onFileSelected" style="display:none" />
        <span v-if="selectedFileName" class="file-name">{{ selectedFileName }}</span>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang='scss' scoped>
.main{
  background-color: white
}

</style>
